import React, { Component } from 'react';
import './swiper-own.less'
class SwiperOwn extends Component {

	constructor(props) {
		super(props)
		console.log(props)
    this.state = {
      // c => current
      cIndex: 0,
      cInfo: {
        id: null,
        info: null,
        img: null
      }
    }
	}

  componentWillMount () {

  }

  // function getItemConEle(props) {
  //   return <div className="list-item">{props.data[0].info}</div>
  // }
  clickTheItem(v) {
    console.log(v)
    this.setState({
      cInfo: {
        id: v.id,
        info: v.info
      }
    })
  }

  render() {
  	
    return (
      <div className="swiper-own">
        <div className="control-con">
          {
            this.props.data.map( item => (
              <div className="list-item" onClick={() => this.clickTheItem(item)} key={item.id}>{item.info}</div>
            ))
          }
        </div>  
        <div className="show-info">
          {this.state.cInfo.info}
        </div>
        <div className="effect-con">
          
        </div>	
      </div>
    )
  }
}

export default SwiperOwn;